<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>后台管理系统</title>
    <link rel="stylesheet" type="text/css" href="../static/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="../static/css/admin.css" />
</head>

<body>
    <div id="content-codeitem" class="page-content-wrap">
        <div id="layer_add" class="layui-card" style="display: none">
            <form class="layui-form layui-card-body" lay-filter="filter_form_add">
                <div class="layui-form-item layui-hide">
                    <label class="layui-form-label">ID</label>
                    <div class="layui-input-block">
                        <input type="text" name="id" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" lay-verify="required" placeholder="用户名" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">年龄</label>
                    <div class="layui-input-block">
                        <input type="text" name="age" placeholder="年龄" lay-verify="number" autocomplete="off"
                            class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-block">
                        <input type="radio" name="sex" value="1" title="男" checked="">
                        <input type="radio" name="sex" value="0" title="女">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">生日</label>
                    <div class="layui-input-block">
                        <input type="text" name="birth" placeholder="请输入" autocomplete="off"
                            class="layui-input layui-date">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">电话号码</label>
                    <div class="layui-input-block">
                        <input type="text" name="tel" placeholder="请输入" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">地址</label>
                    <div class="layui-input-block">
                        <textarea name="addr" placeholder="地址" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-input-block layui-hide">
                    <button class="layui-btn" lay-submit lay-filter="form_submit">立即提交</button>
                    <!--<button id="btn_form_add_reset" type="reset" class="layui-btn layui-btn-primary">重置</button>-->
                </div>
            </form>
        </div>
        <div class="layui-form">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <input type="text" name="title" required lay-verify="required" placeholder="请输入标题"
                            autocomplete="off" class="layui-input">
                    </div>
                    <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit="search"><i
                            class="layui-icon layui-icon-search"></i>搜索</button>
                </div>
            </form>
            <table id="table_codegroup" lay-filter="filter_table_codegroup" class="layui-table" lay-skin="line"></table>
            <script type="text/html" id="toolbar_codegroup">
                <a class="layui-btn layui-btn-normal  layui-btn-sm" lay-event="add"><i
                        class="layui-icon layui-icon-add-1"></i>添加</a>
            </script>
            <script type="text/html" id="optbar_codegroup">
                <a class="layui-icon layui-icon-edit" lay-event="edit"></a>
                <a class="layui-icon layui-icon-delete" lay-event="del"></a>
            </script>
        </div>
        <div class="layui-form">
            <table id="table_codeitem" lay-filter="filter_table_codeitem" class="layui-table" lay-skin="line">
            </table>
            <script type="text/html" id="toolbar_codeitem">
                <a class="layui-btn layui-btn-normal  layui-btn-sm" lay-event="add"><i
                        class="layui-icon layui-icon-add-1"></i>添加</a>
            </script>
            <script type="text/html" id="optbar_codeitem">
                <a class="layui-icon layui-icon-edit" lay-event="edit"></a>
                <a class="layui-icon layui-icon-delete" lay-event="del"></a>
            </script>
        </div>
    </div>
    <script src="../static/layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="../static/js/index.js" data-main="main" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.use(['layer', 'table', 'form'], function () {
            var layer = layui.layer,
                table = layui.table,
                form = layui.form,
                $ = layui.$;

            //列表加载数据
            table.render({
                elem: '#table_codegroup',
                title:'代码组',
                toolbar: '#toolbar_codegroup',
                cols: [
                    [
                        {
                            field: 'groupId',
                            title: 'ID',
                            width: 100,
                            hide: true
                        },
                        {
                            field: 'groupName',
                            title: '组名称',
                            width: '25%'
                        },
                        {
                            field: 'groupType',
                            title: '组类型',
                            width: '25%'
                        },
                        {
                            field: 'groupCaption',
                            title: '组描述',
                            width: '30%'
                        },
                        {
                            toolbar: '#optbar',
                            title: '操作'
                        }
                    ]
                ],
                url: '../data/codeitem.json',
                page: true,
                limit: 8,
                limits: 8,
                defaultToolbar:null,
                parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.page.code, //解析接口状态
                        "msg": res.page.msg, //解析提示文本
                        "count": res.page.count, //解析数据长度
                        "data": res.page.data //解析数据列表
                    };
                }
            });
            table.render({
                elem: '#table_codeitem',
                title:'代码项',
                toolbar: '#toolbar_codeitem',
                cols: [
                    [
                        {
                            field: 'itemId',
                            title: 'ID',
                            hide: true
                        },
                        {
                            field: 'gId',
                            title: 'groupId',
                            hide: true
                        },
                        {
                            field: 'itemCode',
                            title: '项编码',
                            width: '25%'
                        },
                        {
                            field: 'itemName',
                            title: '组名称',
                            width: '25%'
                        },
                        {
                            field: 'itemType',
                            title: '组类型',
                            width: '30%'
                        },
                        {
                            toolbar: '#optbar',
                            title: '操作'
                        }
                    ]
                ],
                url: '../data/codeitem.json',
                page: true,
                limit: 8,
                limits: 8,
                defaultToolbar:null,
                parseData: function (res) { //res 即为原始返回的数据
                    return {
                        "code": res.page.code, //解析接口状态
                        "msg": res.page.msg, //解析提示文本
                        "count": res.page.count, //解析数据长度
                        "data": res.page.data //解析数据列表
                    };
                }
            });
            //工具栏
            table.on('toolbar(filter_table_codeitem)', function (obj) {
                switch (obj.event) {
                    case 'add':
                        // layer.msg('添加');
                        openForm();
                        // main.addTab('codeitem-add.html');
                        break;
                    case 'delete':
                        layer.msg('删除');
                        break;
                    case 'update':
                        layer.msg('编辑');
                        break;
                };
            });
            table.on('row(test)', function (obj) {
                //obj.tr、obj.data
                //obj.del(); obj.update(fields)
            });
            table.on('rowDouble(test)', function (obj) {
                //obj 同上
            });
            //操作栏
            table.on('tool(test)', function (obj) {
                //obj.data、obj.event、obj.tr
                if (layEvent === 'detail') { //查看
                    //do somehing
                } else if (layEvent === 'del') { //删除
                    layer.confirm('真的删除行么', function (index) {
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        layer.close(index);
                    });
                } else if (layEvent === 'edit') { //编辑
                    obj.update({
                        codeitemname: '123',
                        title: 'xxx'
                    });
                }
            });

            //按钮事件
            var active = {
                tableAdd: function () {

                },
                tableRemove: function () {

                }
            };
            //data-method进行按钮绑定
            $('#content-codeitem .layui-btn').on('click', function () {
                var othis = $(this),
                    method = othis.data('method');
                active[method] ? active[method].call(this, othis) : '';
            });
            //form
            form.on('submit(form_submit)', function (data) {
                alert(1)
            });

            function openForm(callback) {
                layer.open({
                    type: 1,
                    area: ['600px', '500px'],
                    shade: 0.5,
                    fixed: true,
                    skin: 'custom-layer-class',
                    offset: 'auto',
                    title: '新增用户',
                    content: $('#layer_add'),
                    btn: ['提交', '重置', '取消'],
                    yes: function (index, layero) {
                        layero.find('form').find('button').trigger('click');
                        layero.find('form').data('layer-index', index);
                    },
                    btn2: function (index, layero) {
                        layero.find('form')[0].reset()
                        return false;
                    },
                    btn3: function (index, layero) {
                        layer.close(index);
                    },
                    success: function (layero, index) {
                        //form.render(null, 'test1'); // 重置
                        layero.find('form')[0].reset();
                    }
                });
            }
        });
    </script>
</body>

</html>